
@import 'base-config.styl';

$vendors = webkit moz o ms official;

-pos(type, args)
  i = 0;
  postion: unquote(type);
  {args[i]}: args[i + 1] is a 'unit' ? (args[i += 1]) : 0;
  {args[i += 1]}: args[i + 1] is a 'unit' ? (args[i += 1]) : 0;

// 绝对位置
absolute()
  -pos('absolute', arguments);

// 固定
fixed()
  -pos('fixed', arguments);

// 圆角
border-radius()
  for vendor in $vendors
    if (vendor == official)
      border-radius: arguments;
    else
      @css { - }{vendor}-border-radius: arguments;

// 阴影
box-shadow()
  -webkit-box-shadow: arguments;
  -moz-box-shadow: arguments;
  box-shadow: arguments;

  html.ie8 &, html.ie7 &, html.ie6 &
    border: 2px solid arguments[length(arguments) - 1];

// 表格斑马线
stripe(even = #fff, odd = #eee)
  tr
    background-color: odd;

    &.even, &:nth-child(even)
      background-color: even;

// 框, padding and margin
box(args...)
  if index(args, '_') != null
    args = join(' ',args)
    args = split('_',args)
    padding unquote(args[0])
    margin unquote(args[1])
  else if args[length(args)-1] is true 
    arg = pop(args)
    margin args
  else
    padding args

// 获取百分比
getp($s, $f) {
  percentage(($s / $f));
}

getf($f) {
  ($f / $root-font-size) rem;
}

/*
 * 媒体查询
 * @params
 */
media_queries = {
  xs: 'only screen and (max-width: 539px)',
  sm: 'only screen and (min-width: 540px)',
  md: 'only screen and (min-width: 768px)',
  lg: 'only screen and (min-width: 968px)',
  xl: 'only screen and (min-width: 1200px)'
};

media(args...)
  conditions = ();

  for breakpoint in args
    push(conditions, media_queries[breakpoint]);

  conditions = join(', ', conditions);

  @media conditions
    {block};


// 设置字体
$text($fz, $color = #333333, $important = false) {
  if ($important) {
    font-size: $fz !important;
    color: $color !important;
    // letter-spacing: $ls !important;
  } else {
    font-size: $fz;
    color: $color;
  }
}

// 设置宽高
// 宽和高
$wh()
  if (length(arguments) <= 1)
    width: arguments;
    height: arguments;
  else
    width: arguments[0];
    height: arguments[1];

// margin系列
$mt($m) {
  margin-top: $m;
}

$mb($m) {
  margin-bottom: $m;
}

$ml($m) {
  margin-left: $m;
}

$mr($m) {
  margin-right: $m;
}

// line-height
$lh($h) {
  line-height: $h;
}

// border
$br() {
  border-right: arguments;
}
$bl() {
  border-left: arguments;
}
$bt() {
  border-top: arguments;
}
$bb() {
  border-bottom: arguments;
}
